<template>
	<view style="background-color: #F6F7FB;">
		<view style="height: 600rpx;background-color: aqua;"></view>

		<view style="margin-top: 20rpx;margin-left: 15rpx;">
			<up-icon label="热门推荐" size="20" :name="iconUrl"></up-icon>
			
			<view style="margin-top: 25rpx;">
				<view v-for="item in popularList" class="popls">
					<view style="width: 300px;">
						<view>
							<span style="font-weight: bold;">{{item.specName}}</span>
						</view>
						<view>
							<span class="mini">{{item.sizePx}} | {{item.sizeMm}}</span>
							
						</view>
					</view>
					<view @click="zzdetail(item)">
						<up-icon name="photo" color="#2979ff" size="28"></up-icon>
						<span class="mini" >制作</span>
					</view>
					
					
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script setup>
	import { getCurrentInstance } from 'vue'   
	const { proxy } = getCurrentInstance();
	import {ref} from "vue"
	//热门图标
	const iconUrl=ref("https://cdn.uviewui.com/uview/example/button.png")
	//热门证件照
	const popularList=ref([]);
	proxy.$rqt.selectDocumentsList({"status":"1"}).then(res=>{
		// console.log("打印啊啊",res);
		popularList.value=res.data
	})
	const zzdetail=(item)=>{
		uni.navigateTo({
			url:"/pages/zzDetail/zzDetail?item="+JSON.stringify(item)
		})
		
	}
</script>

<style scoped>
	.popls{
		display: flex;
		width: 90%;
		margin: auto;
		border: 1rpx solid #ffffff;
		background-color: #ffffff;
		height: 80rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	
	.mini{
		font-size: 24rpx;
		color: gray;
	}
	
</style>
